<!DOCTYPE html>
<html>
<head>
    <title>图片上传</title>
    {% include 'admin/common/header.html' %}
  <style>
/* 这段样式只是用于演示 */
#LAY-component-grid-list .demo-list .layui-card{height: 200px;}
</style>
</head>
<body >
        <div class="layui-card">
                <form class="layui-form edit-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            新增图片
                        </label>
                        <button type="button" class="layui-btn layui-btn-normal" id="logo-img">选择文件</button>
                        <button type="button" class="layui-btn" id="logo-upload-button">开始上传</button>
                    </div>
                </form>
        </div>
<div class="layui-fluid" id="LAY-component-grid-list">
  <div class="layui-row layui-col-space10 demo-list" id="imgdiv">
    </div>
<div  id="layuipage" ></div>
  </div>
</body>
{% include 'admin/common/footer.html' %}
<script>
  layui.use(['jquery','laypage','element', 'form', 'upload'], function () {
    let $ = layui.jquery
    let laypage = layui.laypage;
    var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;
        //选完文件后不自动上传
        upload.render({
            elem: '#logo-img'
            , url: "{{ url_for('adminFile.upload_api') }}"
            , auto: false
            , exts: 'jpg|png|gif|bmp|jpeg'
            , size: 1000
            , bindAction: '#logo-upload-button'
            , done: function (res) {
                if (res.success) {
                    layer.msg(res.msg, {icon: 1, time: 500}, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        window.parent.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });

        var page = 1;//当前页
        var limit = 12;//每页显示的数目
        var resCount, resData ;
        var resPage = renderPage1();

        //渲染展示商品的html页面
        function renderProductHtml(data){
        	var str = "";//用来存储html内容
        	if(data.length > 0){
	        	$.each(data, function(v, o){
	        		str += '<div class="layui-col-sm4 layui-col-md2 layui-col-lg2">';
	        		str += '<div class="layui-card">'+o.name;
	        		str += '</div></div>';
	        	});
	        	$("#imgdiv").html(str);
        	}

        }
      //同步加载商品数据
        function renderProduct(page, limit){
        	$.ajax({
        		async: false,
        		url: 'table',
        		data: {"page": page, "limit": limit},
        		dataType: 'json',
        		success: function(result){
        			console.info(result);
        			resCount = result.count;
        			resData = result.data;
        			renderProductHtml(resData);
        		}
        	});
        }
        //分页的完整功能
        function renderPage1(){
             renderProduct(page, limit);
        	 laypage.render({
                 elem: 'layuipage'
                 ,count: resCount
                 ,limit: limit
                 ,limits: [limit]
                 ,curr: page
                 ,theme: '#FFB800'
                 ,layout: ['count', 'prev', 'page', 'next', 'limit']
                 ,jump: function(obj, first){
                   console.info(obj);
                	   page = obj.curr;
                   if(!first){
                	   renderProduct(page, limit);
                   }
                 }
               });
        }

    //弹出窗设置 自己设置弹出百分比
    function screen () {
      if (typeof width !== 'number' || width === 0) {
        width = $(window).width() * 0.8
      }
      if (typeof height !== 'number' || height === 0) {
        height = $(window).height() - 20
      }
      return [width + 'px', height + 'px']
    }

    window.add = function () {
      layer.open({
        type: 2,
        maxmin: true,
        title: '新增图片',
        shade: 0.1,
        area: screen(),
        content: 'upload'
      })
    }

    window.remove = function (obj) {
      layer.confirm('确定要删除该图片', {
        icon: 3,
        title: '提示'
      }, function (index) {
        layer.close(index)
        let loading = layer.load()
        $.ajax({
          url: 'delete',
          data: { id: obj.data['id'] },
          dataType: 'json',
          type: 'POST',
          success: function (res) {
            layer.close(loading)
            if (res.success) {
              layer.msg(res.msg, {
                icon: 1,
                time: 1000
              }, function () {
                obj.del()
              })
            } else {
              layer.msg(res.msg, {
                icon: 2,
                time: 1000
              })
            }
          }
        })
      })
    }

    window.batchRemove = function (obj) {
      let data = table.checkStatus(obj.config.id).data
      if (data.length === 0) {
        layer.msg('未选中数据', {
          icon: 3,
          time: 1000
        })
        return false
      }
      var ids = []
      var hasCheck = table.checkStatus('dataTable')
      var hasCheckData = hasCheck.data
      if (hasCheckData.length > 0) {
        $.each(hasCheckData, function (index, element) {
          ids.push(element.id)
        })
      }
      layer.confirm('确定要删除这些图片', {
        icon: 3,
        title: '提示'
      }, function (index) {
        layer.close(index)
        let loading = layer.load()
        $.ajax({
          url: "{{ url_for('adminFile.batch_remove') }}",
          data: { ids: ids },
          dataType: 'json',
          type: 'POST',
          success: function (res) {
            layer.close(loading)
            if (res.success) {
              layer.msg(res.msg, {
                icon: 1,
                time: 1000
              }, function () {
                table.reload('dataTable')
              })
            } else {
              layer.msg(res.msg, {
                icon: 2,
                time: 1000
              })
            }
          }
        })
      })
    }
     // 查看大图
    window.photo = function (obj) {
      if (!obj.data.href || obj.data.href === '') {
        layer.msg('图片地址错误！')
        return
      }
      var auto_img = {}
      var img = new Image()
      img.src = obj.data.href
      img.onload = function () {
        var max_height = $(window).height() - 100
        var max_width = $(window).width()
        var rate1 = max_height / img.height
        var rate2 = max_width / img.width
        var rate3 = 1
        var rate = Math.min(rate1, rate2, rate3)
        auto_img.height = img.height * rate
        auto_img.width = img.width * rate
        layer.open({
          type: 1,
          title: false,
          area: ['auto'],
          skin: 'layui-layer-nobg', //没有背景色
          shadeClose: true,
          content: '<img src=\'' + obj.data['href'] + '\' width=\'' + auto_img.width + 'px\' height=\'' + auto_img.height + 'px\'>'
        })
      }
    }

  })
</script>